<!--  -->
<template>
  <div class="app-item" ref="appItem">
    <img class="app-item-img" :style="imgStyle" :src="item.img" />
    <p class="app-item-text">{{ item.name }}</p>
  </div>
</template>

<script>
export default {
  name: 'appItem',
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
      required: true,
    },
  },
  data() {
    return {
      imgStyle: {
        width: 0,
        height: 0,
      },
    };
  },
  mounted() {
    //   this.$nextTick(()=>{
    //       this.imgStyle.width=this.$refs.appItem.clientWidth;
    //       this.imgStyle.height=this.$refs.appItem.clientWidth;
    //   })
    setTimeout(() => {
      const imgWidth = `${this.$refs.appItem.clientWidth / 2}px`;
      this.imgStyle = { width: imgWidth, height: imgWidth };
    }, 0);
  },
  computed: {},
  components: {},
};
</script>

<style lang='scss' scoped>
.app-item {
  width: 20%;
  height: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.app-item-img {
  background-color: #e4393c;
}
.app-item-text {
  margin-top: 10px;
  width: 56px;
  min-height: 30px;
  font-size: 12px;
  line-height: 14px;
}
</style>
